<template>
  <div class>
    <el-form :model="form" label-width="100px" size="mini">
      <el-form-item label="栏目">
        <el-cascader
          v-model="form.nodeid"
          :options="options"
          :props="{ value: 'nodeId', label: 'name', checkStrictly: true }"
          clearable
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="名称">
        <el-input
          v-model="form.name"
          placeholder="名称"
          style="width:500px;"
        ></el-input>
      </el-form-item>
      <el-form-item label="栏目状态">
        <el-select v-model="form.region" placeholder="选择栏目">
          <el-option label="开启" value="shanghai"></el-option>
          <el-option label="不开启" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文档类型">
        <el-select v-model="form.type" placeholder="选择栏目">
          <el-option label="公告" value="1"></el-option>
          <el-option label="通知" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="栏目页模板">
        <el-select v-model="form.region" placeholder="选择栏目">
          <el-option label="区域一" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文档页模板">
        <el-select v-model="form.region" placeholder="选择栏目">
          <el-option label="区域一" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as api from "../api.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      form: {
        nodeid: null,
        user: "",
        region: "",
        name: "",
        type: ""
      },
      options: [],
    };
  },
  created() {
    this.columnList();
    const a = [1]
    console.log(a.pop());
  },
  methods: {
    //栏目新增
    addColumn() {
      if (this.form.nodeid == null) {
        this.form.nodeid = null
      }else{
        this.form.nodeid = this.form.nodeid.pop()
      }
      
      const data = {
        nodePid: this.form.nodeid,
        type: this.form.type,
        name: this.form.name
      };
      api.NewColumn(data).then(res => {
        if (res.data.code == 200) {
          this.form={}
          this.columnList();
        }
      });
    },
    //栏目列表
    columnList() {
      api.columnView().then(res => {
        if (res.data.code == 200) {
          this.options = res.data.list;
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.static {
  margin-left: -13px;
  margin-top: 5px;
}
.information {
  margin-left: 78px;
}
.frame {
  margin-left: 76px;
  margin-top: 5px;
}
.size {
  margin-left: 76px;
  margin-top: 5px;
}
.picture {
  width: 366px;
  height: 181px;
  background-color: #dedede;
  margin-left: 76px;
  margin-top: 5px;
}
.chart {
  margin-left: 24px;
  margin-top: 5px;
}
.multiple > span {
  margin-left: 5px;
}
.multiple {
  margin-left: 40px;
  margin-top: 5px;
}
.release {
  margin-left: 8px;
  margin-top: 5px;
}
.choice {
  margin-top: 5px;
  margin-left: 41px;
}
.describe_left {
  width: 40px;
  line-height: 40px;
}
.describe {
  display: flex;
  margin-top: 5px;
  width: 1000px;
  margin-left: 40px;
}
.whole_bot {
  width: 75px;
  line-height: 40px;
}
.whole {
  height: 55px;
  display: flex;
  margin-top: 5px;
  width: 1034px;
  margin-left: 8px;
}
.column_bot {
  width: 40px;
  line-height: 40px;
}
.column {
  display: flex;
  margin-top: 5px;
  width: 1000px;
  margin-left: 40px;
}
</style>
